import React, { useState } from "react";
import "./TodoHeader.css";
import store from "../../../redux/store";
import { asyncAddTodo } from "../../../redux/reducers/TodosReducer";
export default function TodoHeader() {
  //声明一个状态
  let [v, setV] = useState("");
  return (
    <div className="todo-header">
      <input
        value={v}
        onChange={(e) => {
          setV(e.target.value);
        }}
        // 键盘抬起事件
        onKeyUp={async (e) => {
          //判断
          if (e.code === "Enter") {
            try {
              //新增
              let result = await store.dispatch(asyncAddTodo(v));
              //更新input的内容
              setV("");
              alert("新增成功");
            } catch (e) {
              alert('新增失败');
            }
          }
        }}
        type="text"
        placeholder="请输入你的任务名称，按回车键确认"
      />
    </div>
  );
}
